<script setup lang="ts">
import Footer from "../components/Footer.vue";
import {useRoute, useRouter} from 'vue-router'
import {computed, onBeforeMount, onMounted, onUpdated, reactive, ref} from "vue";
import axios from "axios";
import {getDeliveryAddressById, updateDeliveryAddress} from "../network/api.ts";

const route = useRoute()
const router = useRouter()
let businessId = route.query.businessId
let user = ref({
  userId:sessionStorage.getItem("userId"),
  password:"",
  userName:sessionStorage.getItem("userName"),
  userSex:sessionStorage.getItem("userSex"),
  userImg:""
})
let deliveryAddress = ref({
  daId:0,
  contactName:"",
  contactSex:1,
  contactTel:"",
  address:"",
  userId:""
})//只有面对需要放在数组里面做声明的时候, 才是用reactive 对象
let deliveryAddressArr = ref([deliveryAddress.value])
let userT = ref(sessionStorage.getItem("user"))
let userCall = ref()

onMounted(()=>{
  getDeliveryAddressById(route.query.daId).then(res=>{
        deliveryAddress.value = res.data.result
        console.log("对象deliveryAddress.daId = "+deliveryAddress.value.daId)
      })
      .catch(error=>{
        console.log(error)
      })

})

function editUserAddress() {
  if (deliveryAddress.value.contactName == '') {
    alert('联系人姓名不能为空！');
    return;
  }
  if (deliveryAddress.value.contactTel == '') {
    alert('联系人电话不能为空！');
    return;
  }
  if (deliveryAddress.value.address == '') {
    alert('联系人地址不能为空！');
    return;
  }

  let data = reactive({
    daId:deliveryAddress.value.daId,
    ctSex:deliveryAddress.value.contactSex,
    ctTel:deliveryAddress.value.contactTel,
    address:deliveryAddress.value.address,
    ctName:deliveryAddress.value.contactName,
    address:deliveryAddress.value.address
  })
  updateDeliveryAddress(data).then(res=>{
        console.log(res.data.result)
        if(res.data.code==200){
          router.push({
            path:"/userAddress",
            query:{businessId:businessId}
          })
          alert("更新成功")
          console.log("更新成功")
        }else{
          alert('更新地址失败！');
          console.log('更新地址失败！');
        }
      })
      .catch(error=>{
        console.log(error)
      })
}
</script>

<template>
  <div class="wrapper w-full h-full">

    <!-- header部分 -->
    <header class="w-full h-12vw bg-[#0097ff] flex justify-around items-center text-white text-[4.8vw] fixed left-0 top-0 z-1000">
      <p>编辑送货地址</p>
    </header>

    <!-- 表单部分 -->
    <ul class="form-box w-full mt-12vw">
      <li  class="box-border pt-4vw pl-3vw pb-0 pr-3vw flex">
        <div class="title  flex text-3vw font-700 text-#666">
          联系人：
        </div>
        <div class="content flex items-center">
          <input class="border-none outline-none w-full h-4vw text-3vw "
                 v-model="deliveryAddress.contactName"
                 type="text"  placeholder="联系人姓名">
        </div>
      </li>
      <li  class="box-border pt-4vw pl-3vw pb-0 pr-3vw flex">
        <div class="title  flex text-3vw font-700 text-#666">
          性别：
        </div>
        <div class="content flex items-center" style="font-size: 3vw;">
          <input class="border-none outline-none w-full h-4vw text-3vw "
                 v-model="deliveryAddress.contactSex"
                 type="radio" value="1" style="width:6vw;height:3.2vw;" checked>男
          <input class="border-none outline-none w-full h-4vw text-3vw "
                 v-model="deliveryAddress.contactSex"
                 type="radio" value="0" style="width:6vw;height:3.2vw;">女
        </div>
      </li>
      <li  class="box-border pt-4vw pl-3vw pb-0 pr-3vw flex">
        <div class="title  flex text-3vw font-700 text-#666">
          电话：
        </div>
        <div class="content flex items-center">
          <input class="border-none outline-none w-full h-4vw text-3vw "
                 v-model="deliveryAddress.contactTel"
                 type="tel" placeholder="电话">
        </div>
      </li>
      <li  class="box-border pt-4vw pl-3vw pb-0 pr-3vw flex">
        <div class="title  flex text-3vw font-700 text-#666">
          收货地址：
        </div>
        <div class="content flex items-center">
          <input class="border-none outline-none w-full h-4vw text-3vw "
                 v-model="deliveryAddress.address"
                 type="text"  placeholder="收货地址">
        </div>
      </li>
    </ul>

    <div class="button-add box-border pt-4vw pl-3vw pb-0 pr-3vw">
      <button class="w-full h-10vw text-3.8vw font-700 border-none outline-none rounded-4px text-white bg-#38ca73"
              @click="editUserAddress">更新</button>
    </div>

    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<style scoped>

</style>